<template>
	<view class="chat-detail-page">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="back-btn" @click="goBack">
				<image src="/static/left.png" mode="" style="height: 50rpx;width: 50rpx;"></image>
			</view>
			<view class="doctor-info">
				<image class="doctor-avatar" :src="doctorInfo.avatar" mode="aspectFill" />
				<text class="doctor-name">{{ doctorInfo.name }}</text>
			</view>
			<view class="nav-actions">
				<view class="action-btn">
					<image src="/static/phone.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 聊天消息区域 -->
		<scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop">
			<view class="message-list">
				<view class="message-item" v-for="(message, index) in messages" :key="index" :class="message.type">
					<view class="message-avatar" v-if="message.type === 'doctor'">
						<image :src="doctorInfo.avatar" mode="aspectFill" />
					</view>
					<view class="message-content">
						<view class="message-bubble">
							<text class="message-text">{{ message.content }}</text>
						</view>
						<text class="message-time">{{ message.time }}</text>
					</view>
					<view class="message-avatar" v-if="message.type === 'user'">
						<view class="user-avatar">
							<text class="user-avatar-text">我</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部输入区域 -->
		<view class="chat-input-area">
			<view class="input-container">
				<view class="input-box">
					<input class="message-input" v-model="inputMessage" placeholder="输入消息" @confirm="sendMessage" />
				</view>
				<view class="send-btn" @click="sendMessage" :class="{ active: inputMessage.trim() }">
					<text class="send-icon">✈</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const doctorInfo = ref({
  name: "医生姓名",
  avatar: "/static/tabbar/i3.png"
})

const messages = ref([
  {
    type: "doctor",
    content: "您好! 我是XX科医生XX, 有什么可以帮到您的?",
    time: "10:00",
  },
  {
    type: "user",
    content: "我阳了",
    time: "10:05",
  },
  {
    type: "doctor",
    content: "你想听好消息还是坏消息?",
    time: "10:10",
  },
  {
    type: "user",
    content: "??????",
    time: "10:33",
  },
])

const inputMessage = ref("")
const scrollTop = ref(0)

// 接收从consultation页面传递的医生信息
onLoad((options) => {
  if (options.doctorName) {
    doctorInfo.value.name = options.doctorName
  }
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const sendMessage = () => {
  if (!inputMessage.value.trim()) return
  
  // 添加用户消息
  messages.value.push({
    type: "user",
    content: inputMessage.value,
    time: getCurrentTime(),
  })
  
  const userMessage = inputMessage.value
  inputMessage.value = ""
  
  // 滚动到底部
  nextTick(() => {
    scrollTop.value = 9999
  })
  
  // 模拟医生回复
  setTimeout(() => {
    messages.value.push({
      type: "doctor",
      content: `收到您的消息："${userMessage}"，我会尽快为您解答。`,
      time: getCurrentTime(),
    })
    
    nextTick(() => {
      scrollTop.value = 9999
    })
  }, 1000)
}

const getCurrentTime = () => {
  const now = new Date()
  return `${now.getHours().toString().padStart(2, "0")}:${now
    .getMinutes()
    .toString()
    .padStart(2, "0")}`
}
</script>

<style scoped>
	.chat-detail-page {
		background: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.nav-header {
		width: 95%;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 190, 0, 0.5);
	}

	.back-btn {
		margin-right: 20rpx;
	}

	.doctor-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.doctor-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 15px;
		border: 2px solid #00d80f;
	}

	.doctor-name {
		font-size: 34rpx;
		font-weight: bold;
		/* color: #fff; */
	}

	.nav-actions {
		display: flex;
		gap: 20px;
	}

	.action-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* 聊天消息区域 */
	.chat-messages {
		flex: 1;
		padding: 20rpx;
	}

	.message-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.message-item {
		display: flex;
		align-items: flex-start;
		gap: 15rpx;
	}

	.message-item.doctor {
		justify-content: flex-start;
	}

	.message-item.user {
		justify-content: flex-end;
		flex-direction: row-reverse;
	}

	.message-avatar {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
	}
	.message-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #32cd32;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-avatar-text {
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
	}

	.message-content {
		max-width: 70%;
	}

	.message-bubble {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 8rpx;
	}

	.message-item.user .message-bubble {
		background: #32cd32;
	}

	.message-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
	}

	.message-item.user .message-text {
		color: #fff;
	}

	.message-time {
		font-size: 22rpx;
		color: #999;
		text-align: center;
	}

	/* 底部输入区域 */
	.chat-input-area {
		background: #fff;
		border-top: 1px solid #f0f0f0;
		padding: 20rpx 30rpx;
	}

	.input-container {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.input-box {
		flex: 1;
		background: #f5f5f5;
		border-radius: 25rpx;
		padding: 15rpx 20rpx;
	}

	.message-input {
		width: 100%;
		font-size: 28rpx;
		color: #333;
		border: none;
		outline: none;
	}

	.send-btn {
		background: #ccc;
		border-radius: 25rpx;
		padding: 15rpx 20rpx;
		transition: all 0.3s;
	}

	.send-btn.active {
		background: #32cd32;
	}

	.send-icon {
		font-size: 26rpx;
		color: #fff;
		font-weight: 500;
	}
</style>